<template>
	<div class="container">
		<p class="title_text">数据统计</p>
		<section class="content_wrap">
			<p class="text-bold title-label title_text">各区数据情况</p>
			<AplidCharts type="BasicBar" :option="barChart()" style="height: 30%" ref="chart1El"></AplidCharts>
			<article v-loading="loading">
				<p class="text-bold title-label title_text">服务工单情况</p>
				<div class="flex align-center" style="width: 100%; justify-content: space-around">
					<ul class="nav-box">
						<li
							class="nav-item"
							v-for="(item, index) in navList"
							:key="index"
							@click="handleTabsClick(item, '1')"
							:class="{ active: item.value == activeId }"
						>
							{{ item.label }}
						</li>
					</ul>

					<ul class="nav-box">
						<li
							class="nav-item"
							v-for="(item, index) in navTabList"
							:key="index"
							@click="handleTabsClick(item, '2')"
							:class="{ active: item.value == activeIdType }"
						>
							{{ item.label }}
						</li>
					</ul>
				</div>
				<AplidCharts type="BasicLine" :option="lineChart()" style="height: 25%" ref="chart2El"></AplidCharts>
			</article>
			<article>
				<p class="text-bold title-label title_text">回访情况</p>
				<div class="flex">
					<div class="flex1">
						<div class="fc gap-20 header-title">
							<p class="fc gap-10">
								<span class="text-label">累计回访量</span>
								<span class="text-value">{{ formModel.orderCount }}</span>
							</p>
							<p class="fc gap-10">
								<span class="text-label">今日回访量</span>
								<span class="text-value">{{ formModel.todayVisitCount }}</span>
							</p>
						</div>
						<AplidCharts type="BasicBar" :option="lineAreaChart()" style="height: 30%" ref="chart3El"></AplidCharts>
					</div>
					<div class="flex1">
						<p class="fc title-label">全区回访满意度</p>
						<AplidCharts type="BasicPie" :option="PieChart()" style="height: 30%" ref="chart4El"></AplidCharts>
					</div>
				</div>
			</article>
		</section>
	</div>
</template>

<script setup lang="ts">
import { barChart, lineChart, lineAreaChart, PieChart } from './config'
import apiMod from '@/apiMod/index'
import { getStore } from '@/utils/store'

const userInfo = getStore('userInfo') || {}
const chart1El = ref(null)
const chart2El = ref(null)
const chart3El = ref(null)
const chart4El = ref(null)
const navList = [
	{ label: '全部', value: '1' },
	{ label: '政府购买', value: 'govBuyManage' },
	{ label: '居家上门', value: 'homeElderly' },
	{ label: '家庭床位', value: 'familyNurseBed' },
	{ label: '助餐服务', value: 'elderlyMeal' },
	{ label: '银发顾问', value: 'silverConsultant' },
]

const navTabList = [
	{ label: '月份', value: 'view_esReposOrder_orderStatistics' },
	{ label: userInfo.authArea ? '各街道' : '各区', value: 'view_esReposOrder_areaStatistics' },
]
const formModel = ref({
	orderCount: 0,
	todayVisitCount: 0,
})
const activeId = ref('govBuyManage')
const activeIdType = ref('view_esReposOrder_orderStatistics')
const loading = ref(false)
const handleTabsClick = (item, type) => {
	if (type == '1') {
		activeId.value = item.value
	} else {
		activeIdType.value = item.value
	}
	getOrderStatistics()
}

const getOrderStatistics = () => {
	loading.value = true
	apiMod[activeIdType.value]({
		belongProject: activeId.value == '1' ? undefined : activeId.value,
	})
		.then((res) => {
			loading.value = false
			if (!res.data) return
			const source = res.data?.map((item) => {
				return [item.districtName || item.month, +(item.count || item.value)]
			})

			const option = lineChart(source)
      console.log(chart2El.value,option,'chart2El---')
			chart2El.value?.setOptions(option)
		})
		.catch(() => {
			loading.value = false
		})
}

const getInitData = () => {
	Promise.all([
		apiMod.view_omBusinessServiceObject_statistic(),
		apiMod.view_omBusinessPractitioners_statistic(),
		apiMod.view_dpServiceHome_orgStatistics(),
	])
		.then((res: any) => {
			return res.map((item) => item.data)
		})
		.then((res) => {
			const data = res[0].map((item, index) => {
				return [item.districtName, item.count, res[1][index]?.count, res[2][index]?.count]
			})
			const option = barChart(data)
			chart1El.value?.setOptions(option)
		})

	apiMod.view_esSpotOrder_statistics().then((res) => {
		formModel.value.orderCount = res.data.orderCount
		formModel.value.todayVisitCount = res.data.todayVisitCount

		const tempObj = {
			...res.data,
			orderCount: undefined,
			todayVisitCount: undefined,
			sevenDaysNum: undefined,
			visitResultCount: undefined,
		}

		const source = res.data.weekList.map((item) => {
			return [item.name, item.value]
		})

		const option = lineAreaChart(source)
		chart3El.value?.setOptions(option)
		chart4El.value?.setOptions(PieChart(res.data.visitResultCount / res.data.orderCount))
	})

	getOrderStatistics()
}

onMounted(() => {
	getInitData()
})
</script>

<style lang="scss" scoped>
.nav-box {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	color: #000000e6;
	.nav-item {
		font-family: 'Microsoft YaHei';
		font-weight: 400;
		font-size: 16px;
		text-align: left;
		&:hover {
			cursor: pointer;
		}
	}
	.active {
		color: #0052d9;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			bottom: -10px;
			left: 0;
			width: 100%;
			height: 2px;
			background-color: #0052d9;
			transition: background-color 0.3s ease;
		}
	}
}
.container {
	width: 100%;
	height: 100%;
	.title_text {
		height: 42px;
		display: flex;
		align-items: center;
		margin-top: 10px;
		font-weight: bold;
	}

	.content_wrap {
		height: calc(100% - 52px);
		border-radius: 10px;
		background: #fff;
		.header-title {
			.text-label {
				font-family: 'Microsoft YaHei Bold';
				font-weight: 700;
				font-size: 18px;
				color: #1c1c28;
			}
			.text-value {
				font-family: 'Bahnschrift Bold';
				font-weight: 700;
				font-size: 31px;
				color: #0052d9;
			}
		}
		.title-label {
			padding: 0 20px;
			font-family: 'Microsoft YaHei Bold';
			font-weight: 700;
			font-size: 16px;
			text-align: left;
			color: #1c1c28;
		}
	}
}
</style>
